<template>
  <div class="mybg w-full h-[500px]">
    <main class="flex container mx-auto">
      <div id="left">
        <h1 class="text-3xl font-bold text-white">钟建超</h1>
        <p>全栈程序员</p>
        <p>主语言:PHP、Golang、Python</p>
        <p>辅助语言:Java、C#、</p>
        <p>前端语言:Vue3、Ts、TailWindCss</p>
        <div id="button">
          <a href="https://0305.ink" target="_blank">
            <i class="fa fa-download text-purple"></i> 官方网站
          </a>
          <a href="https://gitee.com/scchkj" target="_blank"
            ><i class="fa fa-fw fa-git text-purple"></i> gitee主页
          </a>
        </div>
        <div id="lable">
          <a href="#" target="_blank"><i class="fa fa-fw fa-paw"></i>文章搜索</a
          ><a href="http://xibaachao.ysepan.com/" target="_blank" data-v-d4713179=""
            ><i class="fa fa-fw fa-folder-o"></i>兵器库</a
          ><a href=""><i class="fa fa-fw fa-code"></i>开发手册 </a>
        </div>
      </div>
      <div class="mt-[100px]">
        <i class="fa fa-lg fa-laptop text-white text-16em"></i>
      </div>
    </main>
  </div>
</template>
<style lang="scss" scoped>
#left {
  p {
    @apply text-white mt-2;
  }
  @apply w-[70%] mt-[100px];
}
#button {
  @apply flex mt-2;

  a {
    @apply block border mr-2 p-2 rounded bg-white pl-5 pr-5;
  }
  i {
    @apply text-[#7952b3];
  }
}
#lable {
  @apply mt-2 text-white text-sm flex;
  a {
    @apply mr-2;
  }
  i {
    @apply text-white;
  }
}
</style>
<script setup lang="ts"></script>
